<template>
  <div
      class="chat-bubble-container"
      :class="{ 'is-me': isMe }"
  >
    <div
        class="chat-bubble"
        :style="bubbleStyle"
    >
      <div class="chat-content">
        <slot></slot>
      </div>
    </div>
    <!-- 气泡尖角 -->
<!--    <div class="bubble-tail" :style="tailStyle"></div>-->
  </div>
</template>

<script>
export default {
  name: 'MessageBubble',
  props: {
    // 背景颜色
    bgColor: {
      type: String,
      default: '#e3f2fd' // 默认浅蓝色
    },
    // 是否为"我"发送的消息（影响对齐方式）
    isMe: {
      type: Boolean,
      default: false
    },
    // 最大宽度（px或%）
    maxWidth: {
      type: String,
      default: '70%'
    },
    width : {
      type: String,
      default: 'auto'
    },
    // 文本颜色
    textColor: {
      type: String,
      default: '#333'
    },
    // 尖角颜色（默认与气泡相同）
    tailColor: {
      type: String,
      default: ''
    }
  },
  computed: {
    bubbleStyle() {
      return {
        'background-color': this.bgColor,
        'max-width': this.maxWidth,
        'color': this.textColor,
        'width': this.width
      }
    },
    tailStyle() {
      return {
        'border-color': this.tailColor || this.bgColor,
        [this.isMe ? 'right' : 'left']: '-6px' // 根据对齐方向设置尖角位置
      }
    }
  }
}
</script>

<style scoped>
.chat-bubble-container {
  display: flex;
  margin: 8px 0;
  position: relative;
  max-width: 100%;
}

/* 默认左对齐（接收的消息） */
.chat-bubble-container:not(.is-me) {
  justify-content: flex-start;
  padding-left: 12px; /* 为尖角留出空间 */
}

/* 右对齐（自己发送的消息） */
.chat-bubble-container.is-me {
  justify-content: flex-end;
  padding-right: 12px; /* 为尖角留出空间 */
}

.chat-bubble {
  display: inline-block;
  max-width: 100%;
  padding: 10px 15px;
  border-radius: 18px;
  word-break: break-word;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  position: relative;
}

/* 接收的消息样式 */
.chat-bubble-container:not(.is-me) .chat-bubble {
  background-color: #c2e5ff !important;
  border-top-left-radius: 0; /* 尖角一侧不需要圆角 */
}

/* 发送的消息样式 */
.chat-bubble-container.is-me .chat-bubble {
  background-color: #d1ffad !important;
  border-top-right-radius: 0; /* 尖角一侧不需要圆角 */
}

.chat-content {
  line-height: 1.5;
  white-space: pre-wrap; /* 保留换行和空格 */
}


/* 接收消息的尖角（左侧） */
.chat-bubble-container:not(.is-me) .bubble-tail {
  left: 0;
  transform: rotate(0deg);
}

/* 发送消息的尖角（右侧） */
.chat-bubble-container.is-me .bubble-tail {
  right: 0;
  transform: rotate(90deg);
  border-color: transparent #dcf8c6 transparent transparent;
}
</style>